<div ng-controller="instrumentCtrl" class="clearfix script-content">
    <div class="wrapper-md">
        <div class="panel panel1 panel-default" ng-show="!showDetail">
            <div class="">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="panel panel-default" style="margin-bottom: 20px;">
                            <div class="panel-heading">应用</div>
                            <div class="panel-detail">
                                <div class="col-sm-12">
                                   <div id="depart0" ng-if="board.app.conf" style="min-height: 187px;" draw-chart conf="board.app.conf">
                                   </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="col-sm-6" style="text-align: center">
                                        <h6>运行中应用</h6>
                                        <p class="app-font" ng-bind="board.app.running"></p>
                                    </div>
                                    <div class="col-sm-6" style="text-align: center">
                                        <h6>应用总数</h6>
                                        <p class="app-font" ng-bind="board.app.count"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default" style="margin-bottom: 20px;">
                            <div class="panel-heading">容器</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp">
                                    <div class="col-sm-6">
                                       <div id="depart1" ng-if="board.container.conf" style="min-height: 187px;" draw-chart conf="board.container.conf"></div>
                                    </div>
                                    <div class="col-sm-6 instrument-dp" style="padding-left: 14px;margin-top: 20px;">
                                        <div class="col-sm-12 instrument-dp instrument-dm">
                                           <p class="instrument-font" style="display: inline-block;">总数</p><span ng-bind="board.container.count"></span>个
                                        </div>
                                        <div class="col-sm-12 instrument-dp instrument-dm">
                                            <img src="/statics/img/circleblue.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">运行中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="board.container.running"></span><span>个</span>
                                        </div>
                                        <div class="col-sm-12 instrument-dp instrument-dm">
                                             <img src="/statics/img/circlegrey.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">停止中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="board.container.stopping"></span><span>个</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12" style="min-height: 160px;">
                                    <div class="col-sm-6" style="text-align: left">
                                        <h6 class="console-bottom">服务容器</h6>
                                        <div class="col-sm-12 instrument-dp" style="padding-top: 10px;">
                                          <p style="display: inline-block; font-size: 16px;">0个</p>&nbsp;&nbsp;&nbsp;&nbsp;<span class="instrument-font">服务实例</span>
                                        </div>
                                        <div class="col-sm-12 instrument-dp">
                                            <p style="display: inline-block;">0个</p><span class="instrument-font">运行中</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6" style="text-align: left">
                                        <h6 class="console-bottom">应用容器</h6>
                                        <div class="col-sm-12 instrument-dp" style="padding-top: 10px;">
                                            <p style="display: inline-block; font-size: 16px;"  ng-bind="board.container.count"></p>&nbsp;&nbsp;&nbsp;&nbsp;<span class="instrument-font">服务实例</span>
                                        </div>
                                        <div class="col-sm-12 instrument-dp">
                                            <p style="display: inline-block;" ng-bind="board.container.running"></p><span class="instrument-font">运行中</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 instrument-dp" style="padding-right: 8px;">
                        <div class="panel panel-default">
                            <div class="panel-heading">镜像</div>
                            <div class="panel-detail">
                                    <div class="col-sm-12 instrument-dp" style="min-height: 90px;">
                                            <div class="col-sm-12 text-center instrument-dp" style="line-height: 90px;">
                                                <a class="instrument-in" ng-click="goList('app.containerManger.img')" ng-bind="board.image.count"></a><span class="instrument-font">镜像</span>
                                            </div>
                                    </div>
                                    <div class="col-sm-6 text-center instrument-dp" style="min-height: 90px;">
                                            <div class="col-sm-12 instrument-dp">
                                                <p class="instrument-font" style="font-size: 14px;" ng-bind="board.image.public"></p><p class="instrument-font">个公有</p>
                                            </div>
                                    </div>
                                    <div class="col-sm-6 text-center instrument-dp" style="min-height:90px;">
                                            <div class="col-sm-12 instrument-dp">
                                                <p class="instrument-font" style="font-size: 14px;" ng-bind="board.image.private"></p><p class="instrument-font">个私有</p>
                                            </div>
                                    </div>
                            </div>
                        </div>
                        </div>
                        <div class="col-sm-6 instrument-dp" style="padding-left: 8px;">
                            <div class="panel panel-default" style="margin-bottom: 20px;">
                                <div class="panel-heading">网络</div>
                                <div class="panel-detail">
                                    <div class="col-sm-12 instrument-dp" style="min-height: 53px;">
                                        <div class="col-sm-12 text-center instrument-dp" style="line-height: 53px;">
                                            <a class="instrument-in" ng-bind="board.net.count" ng-click="goList('app.containerManger.net')"></a><span class="instrument-font">网络</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">硬盘卷</div>
                                <div class="panel-detail">
                                    <div class="col-sm-12 instrument-dp" style="min-height:53px;">
                                        <div class="col-sm-12 text-center instrument-dp" style="line-height: 53px;">
                                            <a class="instrument-in" ng-bind="board.volume.count" ng-click="goList('app.containerManger.disk')"></a><span class="instrument-font">硬盘卷</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="panel panel-default" style="margin-bottom: 12px;">
                            <div class="panel-heading">应用的CPU使用量排序</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp text-center instrument-font" style="min-height: 175px;">
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>cen</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>centop</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>50%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>yhang</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>bogsgh</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>tabhk</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default" style="margin-bottom: 12px;">
                            <div class="panel-heading">应用的内存使用量排序</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp text-center instrument-font" style="min-height: 175px;">
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>cen</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>centop</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>50%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>yhang</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>bogsgh</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                    <div style="min-height: 35px; padding-top: 13px;">
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>tabhk</p>
                                        </div>
                                        <div class="col-sm-6 instrument-dp">
                                            <progressbar value="55" class="progress-xs" type="info"></progressbar>
                                        </div>
                                        <div class="col-sm-3 instrument-dp" style="margin-top: -6px;">
                                            <p>70%</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default" style="margin-bottom: 20px;">
                            <div class="panel-heading">应用更新时间排名</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp text-center instrument-font" style="min-height: 175px;">
                                    <div class="col-sm-12">
                                        <div class="input-group instrument-lp">
                                            <input type="text" class="form-control">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">
                                                        Go!
                                                    </button>
                                                </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-12" ng-repeat="item in board.app.list">
                                        <div class="col-sm-9 instrument-dp text-left">
                                            <p ng-bind="item.applicationCoreUsername"></p>
                                        </div>
                                        <div class="col-sm-3 instrument-dp">
                                            <p ng-bind="item.applicationCoreUpdateDatetime| date:'yyyy-MM-dd HH:mm:ss'"></p>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">应用使用镜像数量排名</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp text-center instrument-font" style="min-height: 175px;">
                                    <div class="col-sm-12">
                                        <div class="input-group instrument-lp">
                                            <input type="text" class="form-control">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button">
                                                        Go!
                                                    </button>
                                                </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-12" ng-repeat="item in board.image.list">
                                        <div class="col-sm-9 instrument-dp text-left">
                                            <p ng-bind="item.applicationCoreUsername"></p>
                                        </div>
                                        <div class="col-sm-3 instrument-dp">
                                            <p ng-bind="item.applicationCoreUpdateDatetime | date:'yyyy-MM-dd HH:mm:ss'"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="panel panel-default" style="margin-bottom: 12px;">
                            <div class="panel-heading">系统状态</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-dp text-center instrument-font" style="min-height: 175px;">
                                    <div class="text-center" style="min-height: 64px;">
                                        <p class="instrument-h" ng-bind="board.cluster.status?'健康':'异常'"></p>
                                        <p class="dfont-back" ng-bind="board.cluster.status?'您当前的系统运行正常':'您当前的系统运行异常'"></p>
                                    </div>
                                    <div class="instrument-bs" ng-repeat="item in board.cluster.list">
                                        <div class="col-sm-2">
                                            <img src="/statics/img/swarmimg.png">
                                        </div>
                                        <div class="col-sm-8 text-left">
                                             <p ng-bind="item.clusterName"></p>
                                        </div>
                                        <div class="col-sm-2">
                                            <p ng-bind="item.status==='normal'?'正常':'异常'"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 48%;float: left">
                            <div class="panel panel-default" style="margin-bottom: 12px;">
                                <div class="panel-heading">主机</div>
                                <div class="panel-detail">
                                    <div class="col-sm-12">
                                        <div id="depart2"  ng-if="board.host.conf" style="min-height: 96px;" draw-chart conf="board.host.conf"></div>
                                    </div>
                                    <div class="col-sm-12">
                                        <p class="instrument-font" style="display: inline-block;">总数</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="board.host.count"></span>台
                                    </div>
                                    <div class="col-sm-12">
                                        <img src="/statics/img/circleblue.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">使用中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="board.host.running"></span><span>台</span>
                                    </div>
                                    <div class="col-sm-12">
                                        <img src="/statics/img/circlegrey.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">维护中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span ng-bind="board.host.stopping"></span><span>台</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 48%;float: right">
                            <div class="panel panel-default" style="margin-bottom: 12px;">
                                <div class="panel-heading">存储</div>
                                <div class="panel-detail">
                                    <div class="col-sm-12">
                                        <div id="depart3" style="min-height: 96px;"></div>
                                    </div>
                                    <div class="col-sm-12">
                                        <p class="instrument-font" style="display: inline-block;">总数</p>&nbsp;&nbsp;&nbsp;&nbsp;<span>1.7</span>T
                                    </div>
                                    <div class="col-sm-12">
                                        <img src="/statics/img/circleblue.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">使用中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span>398.3</span><span>G</span>
                                    </div>
                                    <div class="col-sm-12">
                                        <img src="/statics/img/circlegrey.png">&nbsp;&nbsp;<p class="instrument-font" style="display: inline-block;">维护中</p>&nbsp;&nbsp;&nbsp;&nbsp;<span>1.3</span><span>T</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 instrument-dp panel panel-default">
                            <div class="panel-heading">报警信息</div>
                            <div class="panel-detail">
                                <div class="col-sm-12 instrument-font" style="min-height: 440px;">
                                    <ul class="timeline instrument-tp">
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    Cabba主机使用率过高
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    nnbhs应用资源过高
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    kerry222应用资源过高
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    kerry222应用资源过高
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    Cabba主机使用率过高
                                                </div>
                                            </div>
                                        </li>
                                        <li class="tl-item">
                                            <div class="tl-wrap b-info">
                                                <span class="tl-date">5s ago</span>
                                                <div class="tl-content">
                                                    Cabba主机使用率过高
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>